<template>
  <!-- 标签栏 -->
  <view class="area_box" :class="{ borderRadiu: shape }">
    <view :key="tabsItem.id" class="area_item" @click="onClickItem(index, tabsItem.id)"
      v-for="(tabsItem, index) in tabsList" :class="{ addBlock: current === index }">{{ tabsItem.name || tabsItem.region
      }}
      <view class="text" :class="{ active: current === index }"></view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'TabBar',
  props: {
    tabsList: {
      type: Array,
      default() {
        return [
          { id: 0, name: '预约', },
          { id: 1, name: '已完成', },
        ]
      },
    },
    type: String,
    shape: String, // 是否圆角
  },
  data() {
    return {
      current: 0,
    }
  },
  methods: {
    onClickItem(index, id) {
      this.current = index
      if (this.type === 'reg') {
        this.$emit('onClickItem', index, id)
      } else {
        this.$emit('onClickItem', index, this.type)
      }
    },
  },
}
</script>
<style scoped lang="scss">
.borderRadiu {
  border-radius: 40rpx 40rpx 0rpx 0rpx;
}

.area_box {
  padding-top: 20rpx;
  padding-bottom: 12rpx;
  margin-bottom: 12rpx;
  display: flex;
  text-align: center;
  background: #fff;
  box-shadow: 0 10rpx 10rpx 0 rgba(0, 0, 0, 0.01);

  .area_item {
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    color: #777;
    line-height: 36px;
    font-size: 30rpx;
    font-weight: 500;

    &.addBlock {
      font-size: 35rpx;
      font-weight: 600 !important;
      color: $title-color;
    }

    .text {
      width: 30rpx;
      display: inline-block;
      border-bottom: 6px solid #fff;

      &.active {
        border-bottom: 6rpx solid $klm-color;
      }
    }
  }
}
</style>
